<template>
  <div class="app-container">
    <HmiBatchDelete
      :show-toolbar="showToolbar"
      :show-actions="showActions"
      :highlight-current-row="highlightCurrentRow"
      :page-size="pageSize"
      @data-loaded="handleDataLoaded"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @operation-success="handleOperationSuccess"
      @error="handleError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useHmiConfigStore } from "@/store";
import HmiBatchDelete from "@/components/HmiBatchDelete/index.vue";
import type { HmiBatchDeleteRow } from "@/components/HmiBatchDelete/types";

defineOptions({
  name: "HmiBatchDeleteView",
  inheritAttrs: false,
});

// Store
const hmiConfigStore = useHmiConfigStore();

// 本地状态
const showToolbar = ref(true);
const showActions = ref(true);
const highlightCurrentRow = ref(true);
const pageSize = ref(20);
const dataLoaded = ref(false);
const selectedData = ref<HmiBatchDeleteRow[]>([]);
const currentRowData = ref<HmiBatchDeleteRow | null>(null);

// 事件处理函数 - 使用 try-catch 风格处理错误
function handleDataLoaded(data: HmiBatchDeleteRow[]) {
  try {
    dataLoaded.value = true;
    console.log("数据加载完成:", data);
  } catch (error) {
    ElMessage.error("处理数据加载事件失败");
    console.error("处理数据加载事件失败:", error);
  }
}

function handleSelectionChange(selection: HmiBatchDeleteRow[]) {
  try {
    selectedData.value = selection;
    console.log("选择变更:", selection);
  } catch (error) {
    ElMessage.error("处理选择变更事件失败");
    console.error("处理选择变更事件失败:", error);
  }
}

function handleRowClick(row: HmiBatchDeleteRow) {
  try {
    currentRowData.value = row;
    console.log("行点击:", row);
  } catch (error) {
    ElMessage.error("处理行点击事件失败");
    console.error("处理行点击事件失败:", error);
  }
}

function handleOperationSuccess(type: string, data: any) {
  try {
    // ElMessage.success(`${type} 操作成功`);
    console.log("操作成功:", { type, data });
  } catch (error) {
    ElMessage.error("处理操作成功事件失败");
    console.error("处理操作成功事件失败:", error);
  }
}

function handleError(error: Error) {
  try {
    // ElMessage.error(`操作失败: ${error.message}`);
    console.error("操作失败:", error);
  } catch (err) {
    console.error("处理错误事件失败:", err);
  }
}

// 初始化
async function initializeComponent() {
  try {
    await hmiConfigStore.initHmiConfig();
    console.log("HMI 配置初始化成功");
  } catch (error) {
    ElMessage.error("初始化配置失败");
    console.error("初始化配置失败:", error);
  }
}

// 生命周期
onMounted(async () => {
  await initializeComponent();
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
</style>
